<template>
	<view class="box">
		<!-- #ifdef  MP-WEIXIN-->
		<view class="logo-box">
			<image class="logo-img" src="../../static/images/mini_logo.png" mode="aspectFill"></image>
			<view class="logo-name">云仓优送</view>
		</view>
		<view class="procel">
			<label class="tui-checkbox" @click="agree">
				<image v-if="checked" src="../../static/images/checked.png"></image>
				<image v-else src="../../static/images/unchecked.png"></image>
			</label>
			<view>
				我已阅读并同意
				<text class="green" @click="gotoDoc('useragreement')">《用户协议》</text>
				及
				<text class="green"  @click="gotoDoc('privacypolicy')">《隐私政策》</text>
			</view>
		</view>
		<view class="btn-box" >
			<view class="img" v-if="checked">
				<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="button">唤起授权</button>
				<view class="btn choose">
					手机号快捷登录
				</view>
			</view>
			<view class="img" v-else @tap="showTips">
				<view class="btn">
					手机号快捷登录
				</view>
			</view>
			<view class="cancel-btn" @tap="cancelLogin">
				取消登录
			</view>
		</view>
		<!-- #endif -->
		
		<!-- #ifdef   H5 || APP-PLUS  -->
		<view class="header">
		    <image src="/static/images/mini_logo.png" mode="widthFix"></image>
		</view>
		<view class="list">
			<view class="list-call">
				<!-- <image class="img" src="../../static/images/icon_mobile.png"></image> -->
				<input class="sl-input" v-model="mobile" type="number" maxlength="11" placeholder="请输入手机号" />
			</view>
			<!-- <view class="list-call">
				<image class="img" src="/static/shilu-login/2.png"></image>
				<input class="sl-input" v-model="password" type="text" maxlength="32" placeholder="登录密码" :password="!showPassword" />
				<image class="img" :src="showPassword?'/static/shilu-login/op.png':'/static/shilu-login/cl.png'" @tap="display"></image>
			</view> -->
			<view class="list-call">
				<!-- <image class="img" src="../../../static/images/icon_code.png"></image> -->
				<input class="sl-input" v-model="code" type="number" maxlength="6" placeholder="请输入验证码" />
				<view class="yzm" @click="getCode">{{ second === totalSecond ? '获取验证码' : second + `s`}}</view>
			</view>
		</view>
		
		<view class="button-login" hover-class="button-hover" @tap="CodeLogin">
			<text>登录</text>
		</view>
		
		<view class="cancel-btn" @tap="cancelLogin">
			取消登录
		</view>
		
		<view class="procel1">
			<label class="tui-checkbox" @click="agree">
				<image v-if="checked" src="../../static/images/checked.png"></image>
				<image v-else src="../../static/images/unchecked.png"></image>
			</label>
			<view>
				我已阅读并同意
				<text class="green" @click="gotoDoc('useragreement')">《用户协议》</text>
				及
				<text class="green"  @click="gotoDoc('privacypolicy')">《隐私政策》</text>
			</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
import { error } from '@/uni_modules/uv-ui-tools/libs/function';

	export default {
		data() {
			return {
				checked: false,
				mobile: '',
				code: '',
				totalSecond: 60, // 总秒数
				second: 60, // 倒计时的秒数
				timer: null // 定时器 id
			}
		},
		onLoad() {
			

		},
		methods: {
			showTips(){
				if(!this.checked){
					this.$u.toast('请先阅读并同意服务协议及隐私政策')
					return
				}
			},
			getPhoneNumber(e){  
			    if(e.detail.errMsg == "getPhoneNumber:ok"){
					this.UserLogin(e.detail.code) 
			    }else{
			        console.log("用户点击了拒绝")
			    }   
			},
			UserLogin(code) {
				var _this = this
				this.$u.api.user.UserLogin({
					code: code,
				}).then(res=>{
					if(res.code == 1){
						let data = res.data.userinfo
						// console.log(data, 666, data.token)
						this.$u.vuex('vuex_user', data)
						this.$u.vuex('vuex_token',data.token) 
						this.$u.vuex('vuex_cart',{
							rows: [],
							total: 0,
							count: 0
						})
						// 触发App.onShow
						// 检查onShow是否为函数
						if (typeof (getApp().$vm && getApp().$vm.$options && getApp().$vm.$options.onShow[0]) !== 'function') {
							console.error('onShow 不是一个方法，无法调用');
						}else{
							getApp().$vm.$options.onShow[0].call(getApp().$vm);
						}
						
						this.$u.toast('登录成功', 2000, true);
						
						setTimeout(() => {
							uni.navigateBack({delta: 1})
						}, 200);
						
						if(data.user_wx_mini_open_id == null || data.user_wx_mini_open_id==''){
							uni.login({
								provider: 'weixin',
								success: function(loginRes) {
									_this.$u.api.user.getWxOpenId({code: loginRes.code})
								}
							})
						}
					}else{
						this.$u.toast(res.msg);
					}
				});
			},
			gotoDoc(type){
				uni.navigateTo({
					url: '/pageA/common/document?type='+type
				})
			},
			agree(){
				this.checked = !this.checked
			},
			CodeLogin(){
				if(this.mobile == ''){
					this.$u.toast('请输入手机号码')
					return
				}
				if(this.code == ''){
					this.$u.toast('请输入验证码')
					return
				}
				if(!this.checked){
					this.$u.toast('请先阅读并同意服务协议及隐私政策')
					return
				}
				
				this.$u.api.user.codeLogin({
					mobile: this.mobile,
					code: this.code,
					event: 'login'
				}).then((res)=>{
					if(res.code == 1){
						let data = res.data.userinfo
				
						this.login(data);
						this.$u.toast('登录成功', 2000, true);
		
						setTimeout(() => {
							uni.navigateBack({delta: 1})
						}, 200);
				
					}else{
						this.$u.toast(res.msg, 2000, false);
					}
				}).catch((err)=>{
					this.$u.toast(err.msg, 2000, false)
				})
			},
			async getCode () {
				if (this.mobile.length != 11) {
					this.$u.toast('手机号不正确')
					return;
				}
				
			    // 当前目前没有定时器开着，且 totalSecond 和 second 一致 (秒数归位) 才可以倒计时
				if (!this.timer && this.second === this.totalSecond) {
					// 开启倒计时
					this.timer = setInterval(() => {
						this.second--
						if (this.second <= 0) {
							clearInterval(this.timer)
							this.timer = null // 重置定时器 id
							this.second = this.totalSecond // 归位
						}
					}, 1000)
				
					
					// 发送请求，
					this.$u.api.index.getCode({
						mobile: this.mobile
					}).then(res=>{
						if(res.code == 1){
							this.$u.toast('发送成功，请注意查收')
						}else{
							this.$u.toast(res.msg)
						}
					})
					this.$u.toast('发送成功，请注意查收')
				}
			},
			cancelLogin(){
				uni.navigateBack({delta: 1})
			},
			login(data){
				this.$u.vuex('vuex_user', data)
				this.$u.vuex('vuex_token',data.token) 
				this.$u.vuex('vuex_cart',{
					rows: [],
					total: 0,
					count: 0
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100%;
		height: 100vh;

		.logo-box{
			padding-top: 300rpx;
			text-align: center;
			.logo-img{
				width: 180rpx;
				height: 180rpx;
				box-shadow: 0rpx 12rpx 13rpx 0rpx rgba(0, 0, 0, 0.32);
				border-radius: 50%;
			}
			.logo-name{
				font-size: 30rpx;
				color: #F16325;
				margin-top: 20rpx;
				font-weight: bold;
			}
		}
		.procel{
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
			font-size: 26rpx;
			margin-top: 150rpx;
			margin-left: 50rpx;
			margin-right: 50rpx;
		}
		.procel1{
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
			font-size: 26rpx;
			margin-top: 30rpx;
		}
		.btn-box{
			margin-left: 50rpx;
			margin-right: 50rpx;
		}
        .btn{
			text-align: center;
			border-radius: 60rpx;
			color: #fff;
			background: #aaaaaa; 
			height: 45px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.choose{
			background: #F16325; 
			height: 45px;
		}
		.img {
			position: relative;
			text-align: center;
			padding-top: 50rpx;
			padding-bottom: 0rpx;
			.button {
				width: 100%;
				position: absolute;
				opacity: 0;
			}
			image {
				width: 92rpx;
				height: 92rpx;
			}
		}
		.green{
			color: #F16325;
		}
		.tui-checkbox {
			min-width: 70rpx;
			display: flex;
			align-items: center;
			image{
				width: 36rpx;
				height: 36rpx;
			}
		}
		.app-box{
			margin-top: 200rpx;
			margin-left: 50rpx;
			margin-right: 50rpx;
		}
		.input-box{
			border-bottom: 1rpx solid #f1f1f1;
			margin-bottom: 30rpx;
			height: 70rpx;
		}
		
		// app
		.header {
		  width: 180rpx;
		  // box-shadow: 0rpx 12rpx 13rpx 0rpx rgba(0, 0, 0, 0.32);
		  // border-radius: 50%;
		  padding-top: 100rpx;
		  margin-left: auto;
		  margin-right: auto;
		}
		
		.header image {
		  width: 240rpx;
		  // height: 180rpx;
		}
		
		.list {
		  display: flex;
		  flex-direction: column;
		  padding-top: 80rpx;
		  padding-left: 70rpx;
		  padding-right: 70rpx;
		}
		
		.list-call {
		  display: flex;
		  flex-direction: row;
		  justify-content: space-between;
		  align-items: center;
		  height: 100rpx;
		  color: #333333;
		  border-bottom: 0.5px solid #e2e2e2;
		}
		
		.list-call .img {
		  width: 40rpx;
		  height: 40rpx;
		}
		
		.list-call .sl-input {
		  flex: 1;
		  text-align: left;
		  font-size: 28rpx;
		  margin-left: 16rpx;
		}
		
		.yzm {
		  color: #36BE6A;
		  font-size: 18rpx;
		  line-height: 50rpx;
		  width: auto;
		  height: 50rpx;
		  width: 160rpx;
		  text-align: center;
		  border: 1rpx solid #36BE6A;
		  border-radius: 50rpx;
		}
		
		.button-login {
			text-align: center;
			border-radius: 60rpx;
			color: #fff;
			background: #aaaaaa; 
			height: 45px;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #36BE6A; 
			height: 45px;
			margin-left: 50rpx;
			margin-right: 50rpx;
			margin-top: 80rpx;
		}
		.cancel-btn{
			text-align: center;
			border-radius: 60rpx;
			color: #aaaaaa;
			height: 45px;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-left: 50rpx;
			margin-right: 50rpx;
		}
	}
</style>
